<template>
  <div class="w-page">
    <div class="w-header">
      <div class="w-head">{{info.title}}</div>
      <div class="w-form flex hb vc">
        <div>来源：{{info.source}}</div>
        <div>{{info.date.substring(0,10)}}</div>
      </div>
    </div>
    <img :src="info.image" alt="">
    <div class="ck-content" v-html="info.content">
    </div>
  </div>
</template>

<script>
import { articleDetail } from '@/api/article'
import '../styles/content-styles.css'
export default {
  data () {
    return {
      info: {
        title: '标题',
        source: '管理员',
        date: '2020.02.10 16:30',
        image: '2020.02.10 16:30'
      }
    }
  },
  created () {
    articleDetail({ id: this.$route.query.id }).then(response => {
      this.info.title = response.data.title
      this.info.date = response.data.createTime
      this.info.content = response.data.content
      this.info.image = response.data.coverPicture
    })
  }
}
</script>

<style scoped>
  .w-page {
    width: 100vw;
    padding: 0 20px;
  }

  .w-header {
    padding-top: 17px;
    padding-bottom: 7px;
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: 15px;
  }

  .w-head {
    font-size: 19px;
    color: rgba(49, 49, 49, 1);
  }

  .w-form {
    font-size: 13px;
    color: rgba(112, 112, 112, 1);
    margin-top: 15px;
  }

  .w-page img {
    width: 100%;
    display: block;
  }

  .w-con p {
    text-indent: 20px;
    font-size: 16px;
    color: rgba(83, 83, 83, 1);
    padding: 20px 0;
    line-height: 1.8;
    text-align: justify;
  }
</style>
